<template>
	<view class="tabs">
		<scroll-view scroll-x :scroll-into-view='`id${activeIndex}`'>
			<view class="scroll-view-wrap">
				<view class="scroll-view-content" v-for="(item,index) in list" :class="{active:activeIndex===index}" @click="itemClick(index)" :id="`id${index}`">{{item.name}}</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			},
			activeIndex: {
				type: Number,
				default () {
					return 0
				}
			},
			'scroll-into-view': {
				type: String,
				default () {
					return ''
				}
			},
		},
		methods:{
			itemClick(index){
				this.$emit('change',index)
			}
		}
	}
</script>

<style lang="scss">
	.tabs {
		width: 100%;
		overflow: hidden;

		.scroll-view-wrap {
			display: flex;
			align-content: center;

			.scroll-view-content {
				padding: 15rpx 30rpx;
				flex-shrink: 0;
				&.active{
					color: $base-theme-color;
				}
			}
		}
	}
</style>
